<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> 签到抽奖 </title>
    <style>
        html,body,div,span,ul,li,p{
            margin: 0;
            padding: 0;
            border: 0;
        }
        .wrap{
            background: url("/image/draw_bg.jpg") left / contain;
            width: 7.5rem;
            height: 19.65rem;
            position: relative;
        }
        h2{
            top: 6.0rem;
            width: 7.5rem;
            position: absolute;
            text-align: center;
            font-size: 0.4rem;
            color: #f8f9fa;
        }
        #change{
            color: #FFFFA5;
        }
        .light{
            top: 7.1rem;
            position: relative;
        }
        .light>li{
            list-style: none;
        }
        .light>li>p{
            width: 0.4rem;
            height: 0.4rem;
            background: url("/image/draw_dark.png")  center/ cover;
            margin-bottom: 1rem;
        }
        .light>li>p.blin{
            background: url("/image/draw_light.png") center/ cover;
        }
        .fl{
            float: left;
            left: 0.13rem;
            position: relative;
        }
        .fr{
            float: right;
            right: 0.13rem;
            position: relative;
        }
        .clearfix:after{
            content: '';
            clear: both;
            display: block;
            visibility: hidden;
            height: 0;
        }

        .play{
            top: 7.1rem;
            left: 0.75rem;
            position: absolute;
        }

        .play li{
            list-style: none;
            float: left;
            width: 1.8rem ;
            height: 1.8rem ;
            background: #FFFCFE;
            margin: 0.1rem;
            border-radius: 0.1rem;
            text-align: center;
        }

        .play li:nth-child(4){
            position: relative;
            left: 4rem;
        }
        .play li:nth-child(6){
            position: relative;
            top: 2rem;
        }
        .play li:nth-child(7){
            position: relative;
            left: 2rem;
        }
        .play li:nth-child(8){
            position: relative;
            left: -2rem;
        }
        .play li:nth-child(9){
            position: relative;
            top:-2rem;
            left: -4rem;
        }

        .play>li>div{
            height: 1.6rem;
            width: 1.6rem;
            margin: 0;
            position: absolute;
        }
        .play>li>div>div{
            border-radius: 0.1rem;
            border: 0.1rem double #E21262;
            margin: 0.1rem;
            height: 1.4rem;
            width: 1.4rem;
            position: absolute;
        }

        .play>li>div>div>p {
            position: absolute;
            width: 1rem;
            font-size: 0.27rem;
            line-height: 0.8rem;
            margin: 0.3rem 0.2rem;
            background: #E21262;
            color: #F9EBF8;
            font-weight: bold;
            font-family: "Microsoft Yahei", "Arial", sans-serif;
            word-break: keep-all;
        }

        #btn{
            background: no-repeat url("/image/draw_do.png") center / cover;
        }

        #btn:active{
            background-size: 1.7rem 1.7rem;
        }

        .play li.select{
            background: #F6CB25;
        }

        .d-rule{
            position: relative;
            width: 7rem;
            height: 4.67rem;
            top: 7.6rem;
            left: 0.25rem;
            background: url("/image/draw_rule.png") center / contain;
        }

        /*  */
        #close {

            right: 0.1rem;
            top: -0.1rem;
            position: absolute;
            z-index: 10;
            width: 0.6rem;
            height: 0.6rem;
            background: url("/image/draw_close.png") center / contain;
            -o-animation: fadein .5s .5s linear forwards;
            -ms-animation: fadein .5s .5s linear forwards;
            -moz-animation: fadein .5s .5s linear forwards;
            -webkit-animation: fadein .5s .5s linear forwards;
            animation: fadein .5s .5s linear forwards;
        }

        #mask {
            display: none;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 10;
            width: 7.5rem;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
        }

        .shine{
            width: 100%;
            height: 100%;
            position: absolute;
            background: no-repeat url("/image/draw_gold.png") top / contain;
            -o-animation: circle 10s linear infinite;
            -ms-animation: circle 10s linear infinite;
            -moz-animation: circle 10s linear infinite;
            -webkit-animation: circle 10s linear infinite;
            animation: circle 10s linear infinite;
        }

        .winning {
            height: 6rem;
            width: 6rem;
            margin: 0 0.75rem;
            top: 25%;
            position: relative;
        }
        @-o-keyframes circle{
            0%{ transform:rotate(0deg); }
            100%{ transform:rotate(-360deg); }
        }
        @-moz-keyframes circle{
            0%{ transform:rotate(0deg); }
            100%{ transform:rotate(-360deg); }
        }
        @-ms-keyframes circle{
            0%{ transform:rotate(0deg); }
            100%{ transform:rotate(-360deg); }
        }
        @-webkit-keyframes circle{
            0%{ transform:rotate(0deg); }
            100%{ transform:rotate(-360deg); }
        }
        @keyframes circle{
            0%{
                transform:rotate(0deg);
            }
            100%{
                transform:rotate(-360deg);
            }
        }
        .btn{
            font-size: 0.6rem;
            line-height: 1rem;
            height: 1rem ;
            text-align: center;
            padding: 0 1rem;
            background: #FFEF2B;
            color: #F92E48;
            text-decoration: none;
            position: absolute;
            top: 4.5rem;
            left: 0.7rem;
            z-index: 22;
            border-radius: 0.3rem;
        }
        #card{
            z-index: 12;
            position: absolute;
            top: 1.6rem;
            text-align: center;
            width: 5.6rem;
            background: #ffef2b;
            height: 2rem;
            line-height: 2rem;
            left: 0.2rem;
            border-radius: 0.3rem 0.3rem 0 0;
        }
        #card a{
            color: #F82345;
            text-decoration: none;
        }

        .red-head{
            width: 6rem;
            height: 2rem;
            background: #CE162F;
            border-radius: 2rem 2rem 0 0;
        }

        .red-body{
            font-size: 0.4rem;
            width: 6rem;
            height: 4rem;
            background: #FC3E56;
            color: #Fa0;
            line-height: 3rem;
            text-align: center;
            position: relative;
            z-index: 21;
            border-radius: 0 0 0.5rem 0.5rem;
        }
        #card{
            font-size: 0.4rem ;
            -o-transition: top .5s;
            -ms-transition: top .5s;
            -moz-transition: top .5s;
            -webkit-transition: top .5s;
            transition: top .5s;
        }

        #card.pull{
            /*font-size: 0.4rem ;*/
            -o-animation: card .5s linear forwards;
            -ms-animation: card .5s linear forwards;
            -moz-animation: card .5s linear forwards;
            -webkit-animation: card .5s linear forwards;
            animation: card .5s linear forwards;
        }
        @keyframes card {
            100% {
                top: 0.6rem;
            }
        }

        .winning.reback {
            -o-animation: reback .5s linear forwards;
            -ms-animation: reback .5s linear forwards;
            -moz-animation: reback .5s linear forwards;
            -webkit-animation: reback .5s linear forwards;
            animation: reback .5s linear forwards;
        }
        @keyframes reback {
            0% {
                -o-transform: scale(0);
                -ms-transform: scale(0);
                -moz-transform: scale(0);
                -webkit-transform: scale(0);
                transform: scale(0);
            }
            100% {
                -o-transform: scale(1);
                -ms-transform: scale(1);
                -moz-transform: scale(1);
                -webkit-transform: scale(1);
                transform: scale(1);
            }
        }
    </style>
    <script>
        var html = document.querySelector('html');
        changeRem();
        window.addEventListener('resize', changeRem);
        function changeRem() {
            var width = html.getBoundingClientRect().width;
            html.style.fontSize = width/750*100 + 'px';
        }
    </script>
</head>
<body>
    <div class="wrap">
        <p class="start-end-date"></p>
        <div class="a-title"></div>
        <!--星星-->
        <div class="light-from">
            <span class="light-source"></span>
            <span class="light-source"></span>
            <span class="light-source"></span>
            <span class="light-source"></span>
            <span class="light-source"></span>
            <span class="light-source"></span>
            <span class="light-source"></span>
        </div>

        <div class="main">
            <!--<p class="rule"></p>
            <a href="" id="myWin">
                <p class="my"></p>
            </a>-->
            <!--游戏区域-->
            <div class="box">
                <span class="coin"></span>
                <h2>您今日还有 <span id="change"> 3 </span> 次抽奖机会</h2>
                <ul class="light clearfix">
                    <li class="fl">
                        <p></p>
                        <p class="blin"></p>
                        <p></p>
                        <p class="blin"></p>
                        <p></p>
                    </li>
                    <li class="fr">
                        <p class="blin"></p>
                        <p></p>
                        <p class="blin"></p>
                        <p></p>
                        <p class="blin"></p>
                    </li>
                </ul>
                <!--九宫格-->
                <ul class="play clearfix">
                    <li class="prize select">
                        <div>
                            <div><p>20积分</p></div>
                        </div>
                    </li>
                    <li class="prize">
                        <div>
                            <div><p>10积分</p></div>
                        </div>
                    </li>
                    <li class="prize">
                        <div>
                            <div><p>20积分</p></div>
                        </div>
                    </li>
                    <li>
                        <div>
                            <div><p>40积分</p></div>
                        </div>
                    </li>
                    <!--开始按钮-->
                    <li id="btn"></li>
                    <!--开始按钮-->
                    <li class="prize">
                        <div>
                            <div><p>20积分</p></div>
                        </div>
                    </li>
                    <li class="prize">
                        <div>
                            <div><p>40积分</p></div>
                        </div>
                    </li>
                    <li>
                        <div>
                            <div>
                            <p>20积分</p></div>
                        </div>
                    </li>
                    <li class="prize">
                        <div>
                            <div>
                            <p>50积分</p></div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="d-rule"></div>

        <div id="mask">
            <div class="shine"></div>
            <div class="colorful"></div>
            <div class="winning">
                <div class="red-head"> </div>
                <div class="red-body">恭喜您中奖了</div>
                <div id="card">
                    <a href="" target="_self" class="win">分享获取额外抽奖机会</a>
                </div>
                <a href="" target="_self" class="btn">我要领奖</a>
                <span id="close"></span>
            </div>
        </div>
    </div>

    <script src="/vendor/jquery/jquery.min.js"></script>
    <script src="/js/add.js?date=$!time"></script>
</body>
</html>
